<template>
  <div  v-if="payIndex === 1">
    <div class="search-box">
        <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
        <input
            class="search-input"
            confirm-type="search"
            placeholder="搜索客户名称/负责人"
            placeholder-style="color: #9EA1BB;letter-spacing:2rpx;"
            @input="inputEnter"
        />
    </div>
    <div class="transverse-line row">
        <div class="in-number">共有{{totalCount}}条记录</div>
        <div class="transverse-right align-flex">
          <view class="fatalism align-flex">
            <poput-time display="true" :list='operateData' :default="operateIndex" @cancel="bindPickerChangeOperate"/>
          </view>
          <view class="fatalism align-flex fatalism-margin">
            <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
              <view class="uni-input">排序</view>
            </picker>
            <image
              class="fatalism-dropdown"
              src="/static/score/compositor.png"
            />
          </view>
        </div>
    </div>
    <!-- 第一个数据框 -->
    <div class="substance" v-for="(item) in chargeDetailData"  :key="item.companyId" @click.stop="goCompany(item.companyId,item.dealId)">
        <div class="rubric">{{item.companyName}}</div>
        <div class="circumstance align-flex">
            <div class="circumstance-left">
                <div class="exercise-problems align-flex">
                    <div class="nomenclature">商务负责人：</div>
                    <text class="explicit"> {{ item.legalPerson }} </text>
                </div>
                <div class="exercise-problems align-flex">
                    <div class="nomenclature">充值金额：</div>
                    <text class="explicit"> ¥{{ item.payMoney }} </text>
                </div>
                <div class="exercise-problems align-flex">
                    <div class="nomenclature">充值份数：</div>
                    <text class="explicit"> {{ item.rechargeAmount }}份 </text>
                </div>
                <div class="exercise-problems align-flex">
                    <div class="nomenclature">充值时间：</div>
                    <text class="explicit"> {{ item.createTime }} </text>
                </div>
            </div>
        </div>
    </div>
    <no-Data v-if="totalCount==''"></no-Data>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps, toRefs } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import { getEleRechargeDetail } from '@/api/quick'
import { number } from '@intlify/core-base'
import { onLoad } from '@dcloudio/uni-app'
import user from '@/utils/user'
import { shake } from '@/utils/util'
import noData from '@/components/no-data/no-data.vue'
const show = ref(false)

const props = defineProps({
    // 子组件接收父组件传递过来的值
    payIndex: Number
})
// 使用父组件传递过来的值
const { payIndex } = toRefs(props)

console.log(payIndex.value, '打印一下这个是啥')

const pageNum = ref(1)
// 销售明细  昨天、明天、本周、本月、自定义
const itemRange = ref('' as string | undefined)
const operateIndex = ref(3)
const operateData = ref(['昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const bindPickerChangeOperate = async (index: number, time: undefined | string) => {
    console.log(index.index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    operateIndex.value = index.index
    itemRange.value = index.time
    if (index.index === 1000) {
        itemRangeThree.value = itemRange.value.substring(0, 10)
        itemRangeFour.value = itemRange.value.substring(13, 23)
    } else {
        startTime.value = index.startTime
        endTime.value = index.endTime
    }
    chargeDetailData.value = ''
    pageNum.value = 1
    await eleRechargeDetail()
}

onLoad(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    await eleRechargeDetail()
    uni.$on('onReachBottom', function (data) {
        console.log('onReachBottom')
        getmore()
    })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 到达底部
const hasNextPage = ref(true)
const getmore = () => {
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    eleRechargeDetail()
}

/* 排序 弹窗 */

const sortIndexMethod = ref(0)
const LongPlanInfoName = ref(['按充值时间倒序', '按充值时间正序', '按充值金额倒序', '按充值金额升序'] as string[])
const bindPickerChangeMethod = async function (e: any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    sortIndexMethod.value = e.detail.value
    chargeDetailData.value = ''
    pageNum.value = 1
    await eleRechargeDetail()
}
const startTime = ref('')
const endTime = ref('')
const chargeDetailData = ref()
const totalCount = ref(0)
const eleRechargeDetail = async () => {
    if (pageNum.value === 1) {
        chargeDetailData.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    const result = await getEleRechargeDetail({
        pageNum: pageNum.value,
        pageSize: 20,
        searchText: inputValue.value,
        startTime: operateIndex.value !== 1000 ? startTime.value : itemRangeThree.value || '',
        endTime: operateIndex.value !== 1000 ? endTime.value : itemRangeFour.value || '',
        sortOrder: sortIndexMethod.value
    })
    console.log(result, '电子签充值明细')
    // chargeDetailData.value = result
    // totalCount.value = result.length

    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    console.log(hasNextPage.value, '小起小起')
    const arr = []
    arr.push(...chargeDetailData.value)
    arr.push(...result.list)
    chargeDetailData.value = arr
    console.log(chargeDetailData.value, 'longInsuranceData')
    totalCount.value = result.totalCount
}

// input框输入事件
const inputValue = ref('')
const inputEnter = (e:any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value
        pageNum.value = 1
        eleRechargeDetail()
    }, 300)
}

const goCompany = (companyId:number, dealId:number) => {
    console.log(companyId, 'companyId', dealId, 'dealId')
    if (!dealId) {
    } else {
        console.log(companyId, '公司id', dealId, 'dealId')
        const company = companyId
        const deal = dealId
        uni.navigateTo({
            url: '/packageRemind/pages/electron-detail/electron-detail?id=' + company + '&dealId=' + deal
        })
    }
}
</script>

<style lang="scss" scoped>
.transverse-line {
    box-sizing: border-box;
    padding: 0 30rpx;
    color: #565868;
    font-size: $font-normal;
    .previously,
    .spectacle,
    .compositor {
        box-sizing: border-box;
        padding-left: 30rpx;
        font-weight: 400;
    }
    .in-number {
        font-weight: 400;
        color: $grey;
    }
}

/* payIndex==1 部分 */
.search-box {
    margin: 30rpx;
}

.substance {
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;
    margin: 30rpx;
    .rubric {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
        padding-bottom: 30rpx;
        border-bottom: 1rpx solid #f4f4f7;
    }
    .exercise-problems {
        padding-top: 30rpx;
        font-size: $font-normal;
        font-weight: 400;
        color: $grey;
        .explicit {
            color: $black;
        }
        .nomenclature {
            width: 165rpx;
        }
    }
    .circumstance-right {
        padding-left: 58rpx;
    }
}
.transverse-down {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
}
.pop-up {
    border-radius: 16rpx;
    .choices {
        width: 750rpx;
        height: 564rpx;
        background: #ffffff;
        opacity: 1;
        box-sizing: border-box;
        padding: 30rpx;
        border-radius: 16rpx;
        .custom-img {
            width: 36rpx;
            height: 36rpx;
        }
        .select-while {
            font-size: $font-medium;
            font-weight: bold;
            color: $black;
            padding: 30rpx;
        }
    }
    .choices-picker {
        height: 800rpx;
    }
    .sequence-time {
        padding: 20rpx 30rpx 27rpx 29rpx;
        display: flex;
        justify-content: space-between;
        .specific-blue {
            color: $blue;
        }
        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }
}
.second-popup {
    width: 750rpx;
    height: 388rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 60rpx 60rpx 27rpx 60rpx;
    .select-spectacle {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .status-box {
        color: #565868;
        padding-top: 50rpx;
        display: flex;
        justify-content: space-between;
        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }
    .status-box-blue {
        color: $blue;
    }
}
.third-popup {
    height: 564rpx;
}
.fatalism{
  border: 0;
  background: #FAFAFC;
}
</style>
